<template>
    <view class="rx-bpm-head">
        <view class="rx-user">
            <view class="rx-user-icon">
                <my-icon size="2rem" type="icon-Vue3_user"></my-icon>
            </view>
            <view style="flex: 1">
                <view class="rx-user-name"><span> <rx-user-info style="font-size: 1rem" :userId="data.CREATE_BY_"></rx-user-info></span><span>{{i18n('createBy','创建人')}}</span></view>
                <view class="rx-time"><span>{{i18n('createTime','创建时间')}}</span><span>{{data.CREATE_TIME_}}</span></view>
            </view>
            <image class="rx-state" :src="getImageSrc(data.INST_STATUS_)" />
        </view>
        <view class="rx-id">
            <view style="flex: 1">
                <span>{{i18n('oddNumbers','单号')}}:</span>
                <span>{{ data.ID_ }}</span>
            </view>
            <view class="rx-copy" @click="copy(data.ID_)"><my-icon style="margin-right: 0.25rem" type="icon-lineicon-test21"></my-icon>{{i18n('copy','复制')}}</view>
        </view>
    </view>
</template>

<script>
import RxUserInfo from "@/components/RxUserInfo.vue";
import ABORT_END from "@/static/ABORT_END.png"
import CANCEL from "@/static/CANCEL.png"
import DELETE from "@/static/DELETE.png"
import DRAFTED from "@/static/DRAFTED.png"
import ERROR_END from "@/static/ERROR_END.png"
import LOCKED from "@/static/LOCKED.png"
import PENDING from "@/static/PENDING.png"
import RUNNING from "@/static/RUNNING.png"
import SUBMIT from "@/static/SUBMIT.png"
import success from "@/static/success.png"
import SUCCESS_END from "@/static/SUCCESS_END.png"
import SUPSPEND from "@/static/SUPSPEND.png"
export default {
    name: "RxBpmHead",
    components: {RxUserInfo},
    props:{
        data:{
            type: Object
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formSolutionLang",key);
        },
        copy(value){
            uni.setClipboardData({
                data: value+'', //	这里是个坑接受字符串类型 value转化为字符串
                success: () => {
                    uni.showToast({
                        title:this.i18n('copySuccess','复制成功'),
                        duration: 2000,
                        icon: 'none'
                    });
                }
            });
        },
        getImageSrc(name) {
            const imageMap = {
                ABORT_END,
                CANCEL,
                DELETE,
                DRAFTED,
                ERROR_END,
                LOCKED,
                PENDING,
                RUNNING,
                SUBMIT,
                success,
                SUCCESS_END,
                SUPSPEND
            };
            return imageMap[name]
        }
    }
}
</script>

<style scoped>
.rx-bpm-head{
    background: white;
    padding-top: 1rem;
    margin-bottom: 0.5rem;
}
.rx-user{
    display: flex;
    align-items: center;
    padding: 0rem 1rem;
}
.rx-user-icon{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(66, 133, 244, 1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}
.rx-user-name{
    display: flex;
    align-items: center;
}
.rx-user-name span:nth-child(1){
    font-size: 1.1rem;
}
.rx-user-name span:nth-child(2){
    font-size: 0.8rem;
    background: rgba(225, 247, 246, 1);
    color: rgba(0, 186, 173, 1);
    padding: 0.2rem 0.5rem;
    margin-left: 0.5rem;
    border-radius: 0.2rem;
}
.rx-copy{
    background: rgba(225, 247, 246, 1);
    color: rgba(0, 186, 173, 1);
    padding: 0rem 0.25rem;
    margin-left: 0.5rem;
    border-radius: 0.2rem;
    font-weight: initial;
}
.rx-time{
    color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    grid-gap: 0.5rem;
}
.rx-time span{
    font-size: 0.8rem;
    margin-top: 0.5rem;
}
.rx-state{
    width: 5rem;
    height: 5rem;
}
.rx-id{
    display: flex;
    align-items: center;
    border-top: 0.02rem solid rgba(217, 217, 217, 1);
    margin-top: 0.5rem;
    padding:0.5rem 1rem;
    color: rgba(0, 0, 0, 0.85);
    line-height: 1.5rem;

}
</style>
